<!DOCTYPE html>
<html lang="en">
<head>
    {% load staticfiles %}
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	{% block single_css %}

	{% endblock single_css %}
	<link rel="shortcut icon" type="image/png" href="/media/images/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
	<link rel="stylesheet" type="text/css" href="{% static "css/index.css" %}"/>
	{% block list_css %}

	{% endblock list_css %}
	<script type="text/javascript" src="{% static "js/jquery-1.12.4.min.js" %}"></script>
	<script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"></script>
	<script type="text/javascript" src="{% static "js/index.js" %}"></script>
	<!--注册验证-->
	<script type="text/javascript">
		$(function () {
			$('#register #username').blur(function () {
				var username = $('#register #username').val()
				var data = {username:username}

				if(username === ''|| username.length < 4){
					$('#register .modal-footer').html('用户名太短')
				}
				else{
					$.ajax({
					url:'/users/check',
					type:'post',
					dataType:'json',
					data:data
				})
					.done(function (data) {

						if(data.res === 1){
							var msg = $('#register .modal-footer')
							msg.html('用户名已存在')
							msg.css('color','red')
						}
						else{
							var msg = $('#register .modal-footer')
							msg.html('用户名可用')
							msg.css('color','green')


						}
					})
				}

			})
		})
	</script>
<!--登录验证-->
	<script type="text/javascript">
		$(function () {
			$('#login #inputEmail3').blur(function () {
				var username = $('#login #inputEmail3').val()
				var data = {username:username}

				$.ajax({
					url:'/users/login_check',
					type:'post',
					dataType:'json',
					data:data
				})
					.done(function (data) {
						if (data.res === 0){
							var msg = $('#login .modal-footer')
							msg.html('用户未激活')
							msg.css('color','red')
						}
						else if (data.res === 1){
							var msg = $('#login .modal-footer')
							msg.html('')
						}
						else {
							var msg = $('#login .modal-footer')
							msg.html('用户不存在')
							msg.css('color','red')
						}
					})
					.false(function () {
						alert('失败')
					})
			})
		})
	</script>


	{% block index_js %}

	{% endblock index_js%}
</head>
<body>

	<!--顶部菜单栏-->
	<div class="navbar navbar-inverse navbar-static-top">
		<div class="container">

			<!-- 定义logo和切换小图标   -->
			<div class="navbar-header">

				<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>

				<a href="#" class="navbar-brand">LOGO</a>
			</div>

			<div class="collapse navbar-collapse" id="mymenu">

				<!-- 菜单栏   -->
				<ul class="nav navbar-nav">
					<li class="active"><a href="/index">首页</a></li>
					<li><a href="##all">全部漫画</a></li>
					<li><a href="/list/kind12">国漫区</a></li>

					<li><a href="#">排行榜</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
				    			更多分类 <span class="caret"></span></a>
				            <ul class="dropdown-menu classify-menu">
                                {% for kind in kinds %}
                                <li><a href="/list/kind{{ kind.id }}">{{ kind.kind_name }}</a></li>
								{% endfor %}
				          	</ul>
                    {% if request.user.id == None %}
					<li data-toggle="modal" data-target="#register"><a href="#">注册</a></li>
					<li data-toggle="modal" data-target="#login"><a href="#">登录</a></li>
                    {% else %}
                    <li data-toggle="modal" data-target=""><a href="#">欢迎：{{ request.user }}</a></li>
					<li data-toggle="modal" data-target=""><a href="/users/logout">退出</a></li>
                    {% endif %}
				</ul>

				<!-- 搜索框   -->
				<form class="navbar-form navbar-right">
					<div class="form-group">
						<div class="input-group">
							<input type="text" name="" class="form-control" placeholder="请输入" >
							<span class="input-group-btn">
								<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
							</span>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!--登录弹框-->
	<div class="modal" id="login">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3>登录</h3>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" method="post" action="/users/login" id="form-login">
						  {% csrf_token %}
						  <div class="form-group">
							  <label for="inputEmail3" class="col-sm-2 control-label">账号</label>
							  <div class="col-sm-10">
								  <input type="text" class="form-control" id="inputEmail3" placeholder="账号" name="username">
							  </div>
						  </div>
						  <div class="form-group">
							  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
							  <div class="col-sm-10">
								  <input type="password" class="form-control" id="inputPassword" placeholder="密码" name="password">
							  </div>
						  </div>
						  <div class="form-group">
							  <div class="col-sm-offset-2 col-sm-10">
								  <div class="checkbox">
									  <label>
										  <input type="checkbox" name="remember"> 记住我
									  </label>
								  </div>
							  </div>
						  </div>
						  <div class="form-group">
							  <div class="col-sm-offset-2 col-sm-10">
								  <button type="submit" class="btn btn-primary" id="login-button">登 陆</button>
								  <button type="btn" class="btn btn-default" data-dismiss="modal">取 消</button>
							  </div>
						  </div>
					</form>
				</div>
				<div class="modal-footer"></div>
			</div>
		</div>
	</div>
	<!--注册弹框-->
	<div class="modal" id="register">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3>注册</h3>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" method="post" action="/users/register" id="user-register">
						 {% csrf_token %}
                         <div class="form-group">
							 <label for="inputPassword3" class="col-sm-2 control-label">账号</label>
							 <div class="col-sm-10">
								 <input type="text" class="form-control" id="username" placeholder="账号" name="username">
							 </div>
						 </div>
						 <div class="form-group">
							 <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
						   	 <div class="col-sm-10">
								 <input type="text" class="form-control" id="inputEmail3" placeholder="请输入邮箱" name="email">
						   	 </div>
						 </div>
						 <div class="form-group">
							 <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
						     <div class="col-sm-10">
						    		<input type="password" class="form-control" id="inputPassword3" placeholder="密码" name="password">
						     </div>
						 </div>
						 <div class="form-group">
						 	 <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
						     <div class="col-sm-10">
						    		<input type="password" class="form-control" id="inputPassword3" placeholder="确认密码" name="cpassword">
						     </div>
						 </div>
						 <div class="form-group">
						     <div class="col-sm-offset-2 col-sm-10">
								 <div class="checkbox">
									 <label>
										 <input type="checkbox" name="read"> 已阅读注册需知
									 </label>
								 </div>
						     </div>
						 </div>
						 <div class="form-group">
							 <div class="col-sm-offset-2 col-sm-10">
								  <button type="submit" class="btn btn-primary">注 册</button>
								  <button type="btn" class="btn btn-default" data-dismiss="modal">取 消</button>
							 </div>
						 </div>
					</form>
				</div>
				<div class="modal-footer"></div>
			</div>
		</div>
	</div>
	{% block content %}

	{% endblock content %}
	<footer>
		<div>
			<a href="">关于我们</a>
			<span>|</span>
			<a href="">联系我们</a>
			<span>|</span>
			<a href="">人才招聘</a>
			<span>|</span>
			<a href="">友情链接</a>
		</div>
		<p>CopyRight © 2016 爱看漫画技术有限公司 All Rights Reserved</p>
		<p>电话：028-8635888 蜀ICP备11000002000001号</p>
	</footer>

	{% block test %}

	{% endblock test %}

</body>
</html>